<template>
  <div class="addGoodsTable app-container">
    <div>
      <goods-search />
    </div>
    <div class="accountOperation">
      <add-good />
      <goods-state :goods-selection="goodsSelection" />
    </div>
    <el-table
      ref="multipleTable"
      :data="goodList"
      tooltip-effect="dark"
      style="width: 100%"
      :default-sort="{prop: 'date,sales', order: 'descending'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column label="商品编号" width="120">
        <template slot-scope="scope">
          {{ scope.row.number }}
        </template>
      </el-table-column>
      <el-table-column label="商品名" width="120">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="商品类别" width="120">
        <template slot-scope="scope">
          {{ scope.row.type }}
        </template>
      </el-table-column>
      <el-table-column label="价格/元" width="120">
        <template slot-scope="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column label="进价/元" width="120">
        <template slot-scope="scope">
          {{ scope.row.originalPrice }}
        </template>
      </el-table-column>
      <el-table-column label="总销量" width="120">
        <template slot-scope="scope">
          {{ scope.row.amount }}
        </template>
      </el-table-column>
      <el-table-column label="商品状态" width="120">
        <template slot-scope="scope">
          {{ scope.row.status }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="info" round size="small" @click="editGood(scope.row)">查看</el-button>
          <el-button type="primary" round size="small" @click="alterGoodBtn(scope.row)">编辑</el-button>
          <el-button type="danger" round size="small" @click="removeGood(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <look-goods :row="row" :look-good="lookGood" @closeEdit="closeEdit" />
    <alter-goods :row="row" :alter-good="alterGood" @closeEdit="closeEdit" />
  </div>
</template>

<script>
import { getGoodsList, removeGoods } from '@/api/goods'
import addGood from './components/addGood'
import goodsState from './components/goodsState'
import goodsSearch from './components/goodsSearch'
import lookGoods from './components/lookGood'
import alterGoods from './components/alterGood'
export default {
  components: {
    addGood,
    goodsState,
    goodsSearch,
    lookGoods,
    alterGoods
  },
  data() {
    return {
      goodList: null,
      multipleSelection: [],
      lookGood: false,
      row: {},
      alterGood: false,
      goodsSelection: null
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    // toggleSelection(rows) {
    //   if (rows) {
    //     rows.forEach(row => {
    //       this.$refs.multipleTable.toggleRowSelection(row)
    //     })
    //   } else {
    //     this.$refs.multipleTable.clearSelection()
    //   }
    // },
    // handleSelectionChange(val) {
    //   this.multipleSelection = val
    // },
    // 获取商品列表
    getGoodsList() {
      getGoodsList().then(res => {
        if (res.resultCode === '0000') {
          this.goodList = res.data.list
        }
      })
    },
    // 删除商品
    removeGood(id) {
      removeGoods({ id: id }).then(res => {
        if (res.resultCode === '0000') {
          this.getGoodsList()
        }
        console.log(res)
      })
    },
    // 查看商品详情
    editGood(row) {
      this.lookGood = true
      this.row = row
    },
    // 编辑商品
    alterGoodBtn(row) {
      this.alterGood = true
      this.row = row
    },
    // 子组件关闭弹窗
    closeEdit(data) {
      if (data === 'look') {
        this.lookGood = false
      } else {
        this.alterGood = false
        this.getGoodsList()
      }
    },
    handleSelectionChange(selection) {
      this.goodsSelection = selection
    }
  }
}
</script>
<style lang="stylus" scoped>
  .addGoodsTable >>> .el-button+.el-button
    margin-left  0
  .accountOperation
    display flex
    align-items center
</style>
